<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title></title>
    <style type="text/css">
      #bg-bk {
        background-color: rgba(0, 0, 0, .6);
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        display: none;
      }

      #bg-content-bg {
        text-align: center;
        max-width: 960px;
        min-width: 300px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: center;
      }

      .show {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

      }

      .img {
        width: 100%;
        cursor: move;
        position: absolute;
        left: 0;
        /* top: 10%; */
      }
      .close-bk {
        width: 36px;
        height: 36px;
        background: url(./icon/x.png) no-repeat -232px -32px;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 26px;
        color: #fff;
        cursor: pointer;
        z-index: 999999999999999999999999;
      }

      .close-bk:hover {
        background: url(./icon/x.png) no-repeat -232px -132px;
      }
    </style>
  </head>
  <body>
    <div id="bg-bk">
      <div class="close-bk"></div>
      <div id="bg-content-bg">
        <div class="show" id="show">
          <!-- <img class="img" src="./img/3.jpg"> -->
        </div>
      </div>
    </div>
    <script type="text/javascript">
      // $("#btn").click(showbk("8"))
      showbk("2") // 图片名字

      function showbk(name) {
        var isDown = false;
        var closebk = $(".close-bk")
        var bg = $("#bg-bk")
        var step = 1;
        var x, y;
        var l;
        var t;
        $("#show").empty()
        $("#show").append("<img class='img' src='./img/" + name + ".jpg'>")
        var img = document.querySelectorAll(".img")[0];

        bg.fadeIn()
        /* zoom */
        document.onmousewheel = function(e) {
          var isbig = e.wheelDelta;
          if (isbig >= 0) {
            if (step >= 1.6) {} else {
              step += 0.1;
              img.style.transform = "scale(" + step + ")";
            }
          } else {
            if (step <= 0.7) {} else {
              step -= 0.1;
              img.style.transform = "scale(" + step + ")";
            }
          }
        }
        /* zoom */

        img.onmousedown = function(e) {
          e.preventDefault()
          img.style.cursor = "move"
          // console.log(e.offsetX);
          // console.log(img.offsetLeft);
          x = e.clientX;
          y = e.clientY;
          l = img.offsetLeft;
          t = img.offsetTop;
          isDown = true;
        }
        document.onmousemove = function(e) {
          if (isDown == false) {
            return;
          } else {
            var nx = e.clientX;
            var ny = e.clientY;
            //计算移动后的左偏移量和顶部的偏移量
            var nl = nx - (x - l);
            var nt = ny - (y - t);
            img.style.left = nl + 'px';
            img.style.top = nt + 'px';
          }
        }
        img.onmouseup = function() {
          // img.style.cursor = "default"
          isDown = false
        }
        closebk.click(function() {
          bg.fadeOut()
        })
      }
    </script>
  </body>
</html>
